<template>
  <el-dialog
      v-model="insertUsersVisible"
      width="30%"
      :title="title"
      :before-close="() => insertUsersExitBefore()"
  >
        <span>
          <el-form
              ref="insertUsersFormRef"
              label-width="120px"
              :model="insertEditForm"
              :rules="insertUsersRules"
              status-icon
          >
            <el-form-item v-for="(item,index) in tableInfo" :key="index" :prop='item.prop' :label="item.label">
              <!--       输入框类型        -->
              <!--       密码框        -->
              <el-input v-if="item.isPassword" v-model="insertEditForm[item.prop]" show-password/>
              <!--       选择框        -->
              <el-select v-else-if="item.isSelect" v-model="insertEditForm[item.prop]"
                         :placeholder="`请选择${item.label}`">
                <el-option
                    v-for="opt in item.options"
                    :key="opt[item.select.key]"
                    :label="opt[item.select.label]"
                    :value="opt[item.select.key]"
                />
              </el-select>
              <!--       数字框        -->
              <el-input-number v-else-if="item.isNumber" v-model="insertEditForm[item.prop]" :min="1" :max="10"/>
              <!--       浮点数框        -->
              <el-input-number v-else-if="item.isFloat" v-model="insertEditForm[item.prop]" :precision="2" :step="0.1"
                               :min="0"/>
              <!--       日期框        -->
              <el-date-picker v-else-if="item.isDate"
                              v-model="insertEditForm[item.prop]"
                              type="date"
                              placeholder="选一个日期"
                              value-format="YYYY-MM-DD"
                              size="default"
              />

              <el-input v-else v-model="insertEditForm[item.prop]"/>
            </el-form-item>
          </el-form>
        </span>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="insertUsersExitBefore">取消</el-button>
            <el-button type="primary" @click="insertUsersSumbit"
            >{{ title }}</el-button>
          </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive, onBeforeMount, computed, onMounted, inject} from "vue";
import axios from "axios";
// 父组件传值
const props = defineProps(['tableInfo', "title"]);
// 父组件传方法
const emit = defineEmits(["onSubmitReq", 'onTableReq']);
// const tableReq = inject("tableReq");

const insertUsersRules = ref({});
// 编辑表单
const insertEditForm = ref({})
// 添加用户对话框展示
const insertUsersVisible = ref(false);
const insertUsersFormRef = ref();
// 添加用户窗口关闭
const insertUsersExitBefore = () => {
  insertUsersVisible.value = false;
  resetForm(insertUsersFormRef);

};


const updateForm = (data) => {
  for (const dataKey in data) {
    //@ts-ignore
    insertEditForm.value[dataKey] = data[dataKey];
  }
}
const insertUsersShow = (data) => {
  if (data) updateForm(data);
  insertUsersVisible.value = true;
}

// 按下添加用户
const insertUsersSumbit = async () => {
  if (!insertUsersFormRef.value) return;
  await insertUsersFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      // 提交请求
      await emit("onSubmitReq", insertEditForm.value);
      insertUsersVisible.value = false;
      resetForm(insertUsersFormRef);
    }
  });
};
// 传入对应表单的ref,然后进行清空
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.value.resetFields();
};


onBeforeMount(() => {
  // console.log(1,props.tableInfo);
})
// 子传父方法
defineExpose({
  insertUsersShow
})
</script>

<style scoped>

</style>